<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            position: relative;
            width: 800px;
            margin: 0 auto;
        }
        
        #bLine {
            /* content: ''; */
            display: block;
            width: 120px;
            height: 5px;
            background-color: red;
            position: absolute;
            bottom: 0;
        }
        
        .nav ul {
            overflow: hidden;
        }
        
        .nav ul {
            background-color: #000;
            list-style: none;
        }
        
        .nav li {
            float: left;
            height: 50px;
            line-height: 50px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
        
        .nav li.on {
            color: red;
        }
        /* .nav li:hover {
            color: red;
        } */
    </style>
</head>

<body>

    <div class="nav">
        <ul>
            <li class="on">Javascript</li>
            <li>PHP</li>
            <li>CSS</li>
            <li>jQuery</li>
            <li>AnuglarJS</li>
        </ul>
        <div id="bLine"></div>
    </div>

    <script src="../jQuery库/jquery-3.1.0.js"></script>
    <script>
        $("li").mouseenter(function() {
            let outerWidth = $(this).outerWidth();
            let sleft = $(this).position().left;

            $(this).addClass("on").siblings().removeClass("on");
            $("#bLine").stop().animate({
                width: outerWidth,
                left: sleft
            })
        })
    </script>



</body>

</html>